<!-- 使用方式
total: 总条数
    page: 页码
    pageSize: 每一页的条数
    @change: 查询列表数据 
    <my-pagination 
      :total ="rows"
      :page.sync ="listQuery.pageNo"
      :pageSize.sync ="listQuery.pageSize"
      @change = "getData"
/>-->
<template>
  <div class="pagination">
    <!-- 分页 -->
    <!-- layout：layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。
    total：表示总条目数
    page-sizes：page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]
    page-size：size用于设置每页显示的页码数量
    current-page：页码
    size-change：页数变化触发
    current-change：当前页变动时候触发的事件 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="curPage"
      :page-sizes="pageSizes"
      :page-size.sync="curSize"
      :layout="layout"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name:'my-pagination',
  props:{
      page:{ //页码
        type:Number,
        default:1
      },
      pageSize:{ //每页条数
        type:Number,
        default:10
      },
      total:{  //总条数
          required:true,
          type:Number
      },
      pageSizes:{ //展示的选择每页显示个数的选项
        type:Array,
        default(){
            return [10,20,30,40]
        }
      },
      layout:{  //表示需要显示的内容
        type:String,
        default:"total, sizes, prev, pager, next, jumper"
      }
  },
  computed:{
      curPage:{
          get(){
              return this.page;
          },
          set(val){
              this.$emit('update:page',val);
          }
      },
      curSize:{
          get(){
              return this.pageSize;
          },
          set(val){
              this.$emit('update:pageSize',val);
          }
      }
  },
  methods:{
    //当前每页条数变化
    handleSizeChange(val) {
      this.$emit("change");
    },
    //当前每页变化
    handleCurrentChange(val) {
       this.$emit("change");
    }
  }
}
</script>


